{% extends "../layouts/default.html" %}

{% block title %}新增文章 - Markdown{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/public/common/css/github-markdown-css/5.1.0/github-markdown.css"/>
    <style>
        body{
            background-color:#fff;
        }
        #editor{
            margin:0;
            height:100%;
            font-family:"Helvetica Neue", Arial, sans-serif;
            color:#333;
        }
        .app-md-markarea, .editor-container{
            display:inline-block;
            width:calc(50% - 3px);
            height:100%;
            vertical-align:top;
            box-sizing:border-box;
            padding:0 20px;
        }
        .app-md-markarea{
            border:none;
            border-right:1px solid #ccc;
            resize:none;
            outline:none;
            background-color:#f6f6f6;
            font-size:14px;
            font-family:"Monaco", courier, monospace;
            padding:20px;
            min-height:calc(100vh - 65px);
        }
        .app-md-form code{
            color:#f66;
        }
        #editor div.editor-container{
            height:calc(100vh - 65px);
            overflow-y:auto;
        }
        .app-md-form ::-webkit-scrollbar{
            display:block;
        }
    </style>
{% endblock %}

{% block content %}
    <div id="app">
        <el-form ref="modelForm" class="app-md-form" :model="modelForm" :rules="rules" label-width="80px">
            <div class="app-md-header">
                <div class="app-md-title">
                    <el-input v-model="modelForm.title" maxlength="100" autocomplete="off" placeholder="请输入标题，您可以输入100个字" class="title-input" />
                </div>
                <div class="app-md-action">
                    <el-button size="medium" @click="toggleDrawer()">设置</el-button>
                    <el-button size="medium" type="primary" @click="createData()">发布</el-button>
                    <el-button size="medium" @click="toEditor()">切换富文本编辑器</el-button>
                </div>
            </div>
            <div id="editor" class="app-md-editor markdown-body">
                <textarea :value="input" class="app-md-markarea" @input="update"></textarea>
                <div class="editor-container" v-html="compiledMarkdown"></div>
            </div>
            <el-drawer title="设置" :visible.sync="drawer">
                <div class="app-md-drawer">
                    <el-collapse v-model="activeCollapse">
                        <el-collapse-item title="文章状态" name="1">
                            <el-checkbox v-model="modelForm.status" :true-label="2" :false-label="1">保存草稿</el-checkbox>
                        </el-collapse-item>

                        <el-collapse-item title="分类" name="2">
                            <el-form-item label="文章类型" prop="catid">
                                <el-select v-model="modelForm.catid" style="width:100%" placeholder="请选择类别">
                                    <el-option v-for="item in categoryList" v-if="item.colId != 4" :key="item.colId" :label="item.colTitle" :value="item.colId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </el-drawer>
        </el-form>
    </div>
{% endblock %}
{% block script %}
    <script src="/public/common/js/marked/0.3.6/marked.js"></script>
    <script>
        var vm = app.vue({
            el: '#app',
            data() {
                return {
                    drawer: false,
                    input: '',
                    modelForm: {
                        author: 'admin',
                        title: '',
                        content: '',
                        status: 1,
                    },
                    rules: {
                        title: [
                            { required: true, message: '请输入标题名称', trigger: 'blur' },
                            { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'blur' }
                        ],
                        catid: [{ required: true, message: '请请选择类别', trigger: ['blur', 'change'] }],
                        description: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                        content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
                    },
                    categoryList: [],
                    activeCollapse: ['1', '2'],
                }
            },
            computed: {
                compiledMarkdown: function () {
                    return marked(this.input, { sanitize: true })
                }
            },
            created() {
                this.getCategoryList()
            },
            methods: {
                // 获取文章分类
                getCategoryList() {
                    app.request({
                        method: 'get',
                        url: 'blog/category/list',
                        params: this.queryForm,
                    }).then((res) => {
                        this.categoryList = res?.data?.rows
                    })
                },
                update: _.debounce(function (e) {
                    this.input = e.target.value
                }, 300),
                setFields() {
                    this.modelForm.md = this.input
                    this.modelForm.content = window.marked(this.input, { sanitize: true })
                },
                // 保存
                createData() {
                    this.setFields()

                    this.$refs.modelForm.validate(valid => {
                        if (valid) {
                            app.request({
                                method: 'post',
                                url: 'blog/insert',
                                data: this.modelForm,
                            }).then(() => {
                                this.$notify({
                                    title: 'Success',
                                    message: '新增成功',
                                    type: 'success',
                                    duration: 2000
                                })
                            })
                        }
                    })
                },
                toggleDrawer() {
                    this.drawer = !this.drawer
                },
                toEditor() {
                    window.open('/admin/blog/edit')
                }
            }
        })
    </script>
{% endblock %}